<template>
    <div class="cooks">
        <div class="cook" v-for="(item, index) in cooks" :key="item.id" @click="serving(index)">
            <Cook :cooker-info="item" :cur-time="curTime" :times="times" :names="names"  :max-wait-time="maxWaitTime"></Cook>
        </div>

        <div class="cook" @click="removeCook">
            <Badge class="gray" :id="0"></Badge>
            <i class="func-btn remove-btn">
                <img src="../assets/remove.png">
            </i>
        </div>

        <div class="cook add-cook" @click="addCook">
            <Badge class="gray" :id="0"></Badge>
            <i class="func-btn add-btn">
                <img src="../assets/add.png">
            </i>
        </div>
    </div>
</template>

<script>
import Badge from './Badge.vue'
import Cook from './Cook.vue'

export default {
  name: 'Cooks',
  components:{
    Badge,
    Cook
  },
  props:{
      names:Map,
      cooks:Array,
      times:Map,
      curTime:Number,
      maxWaitTime:Number
  },
  methods:{
      removeCook(){
          this.$emit('removecook')
      },
      addCook(){
          this.$emit('addcook')
      },
      serving(idx){
          let cook = this.cooks[idx]
          if(cook.state == 1&&Array.from(cook.task)[0][1]){
              this.$emit('serving',idx)
          }
      }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .cooks{
        width: 100%;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        padding: 24px;
        background-color: #ffd24d;
        border: 12px solid #fff;
        border-radius: 40px;
    }

    .cook{
        position: relative;
        width: 32%;
        margin-bottom: 40px;
    }

    .gray{
        background-color: #dddddd;
    }

    .func-btn img{
        width: 40px;
        height: 40px;
    }

    .func-btn{
        position: absolute;
        right: 0;
        top: 0;
    }
</style>
